<template>
  <div class="app-container">
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <MmvTitle title="订单信息"></MmvTitle>
        </template>
        <el-form label-width="120px">
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="订单编号:">{{ shortBasic.orderNo || '--' }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户名称:">{{ shortBasic.memberName || '--' }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预约取车时间:">{{ shortBasic.rentalStartTime || '--' }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预约还车时间:">{{ shortBasic.rentalEndTime || '--' }}</el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="预约租期:">{{ shortBasic.leaseDays || '--' }}天</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实际取车时间:">{{ shortBasic.actualStartTime || '--' }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实际还车时间:">{{ shortBasic.actualEndTime || '--' }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实际租期:">{{ detail.actualLeaseDays || '--' }}天</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="汽车租赁押金:">{{ shortBasic.deposit || '--' }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="押金支付类型:">{{ shortBasic.depositPayType|depositPayType }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付方式:">{{ shortBasic.depositPayWay|depositPayWay }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="抵扣金额:"><strong>{{ depositDeduct || '--' }}</strong></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="补缴金额:"><strong>{{ payTheCostSum || '--' }}</strong></el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="应退金额:"><strong>{{ depositRefund || '--' }}</strong></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <MmvTitle title="押金扣款明细"></MmvTitle>
        </template>

        <el-table v-loading="loading" :data="detail.settlementList" border>
          <el-table-column label="扣款原因" align="center" prop="deductionsFor"/>
          <el-table-column label="扣款金额" align="center" prop="deductionsAmount"/>
          <el-table-column label="来源" prop="source">
            <template slot-scope="{row}">
              {{ {1: '手动添加', 2: '还车验车'}[Number(row.source)] }}
            </template>
          </el-table-column>
        </el-table>

      </el-collapse-item>

      <el-collapse-item name="3">
        <template slot="title">
          <MmvTitle title="支付凭证"></MmvTitle>
        </template>

        <el-form label-width="100">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item>
                <ImageUpload v-model="url" :limit="1"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer" style="text-align: end;">
          <el-button @click="closeDiolog">取消</el-button>
          <el-button :loading="submitBtnLoading" type="primary" @click="submitData">确定</el-button>
        </div>
      </el-collapse-item>
    </el-collapse>


  </div>
</template>

<script>
import {
  depositRefundDetail,
  depositRefund
} from '@/api/order/index';
import MmvTitle from '@/components/MmvUI/MmvTitle.vue';
import * as api from "@/api/order/voucher";

export default {
  components: {
    MmvTitle
  },
  dicts: ['sys_pay_type', 'order_payStatus', 'charge_type'],
  props: ['orderNo','type'],
  filters: {
    depositPayType(val) {
      return {
        1: '线上',
        2: '线下',
        3: '微信支付分',
      } [Number(val)] || '--';
    },
    depositPayWay(val) {
      return {
        1: '微信',
        2: '支付宝',
        3: '信用卡',
        4: '现金',
        5: '微信支付分',
      } [Number(val)] || '--';
    },
  },
  data() {
    return {
      submitBtnLoading: false,
      // orderNo: '13259c14b6f1483b9c1425e7413afad3',
      activeNames: ['1','2','3'],
      detail: {
        settlementList:[]
      },
      shortBasic: {
        orderNo: '',
        deposit: ''
      },
      loading: true,
      btnLoadIng: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      url: "",
    }
  },
  computed: {
    depositDeduct() {
      let sum = 0;
      for (let item of this.detail.settlementList) {
        sum += Number(item.deductionsAmount);
      }
      return sum <= this.shortBasic.deposit ? sum.toFixed(2) : this.shortBasic.deposit.toFixed(2)
    },
    payTheCostSum() {
      let sum = 0;
      for (let item of this.detail.settlementList) {
        sum += Number(item.deductionsAmount);
      }
      return sum <= this.shortBasic.deposit ? 0 : (sum - this.shortBasic.deposit).toFixed(2)
    },

    depositRefund() {
      let sum = 0;
      for (let item of this.detail.settlementList) {
        sum += Number(item.deductionsAmount);
      }
      return sum <= this.shortBasic.deposit ? (this.shortBasic.deposit - sum).toFixed(2) : 0
    },
  },
  mounted() {
    this.doDepositRefundDetail();
  },
  methods: {
    closeDiolog() {
      this.$emit('close');
    },
    submitData() {
      if (!this.url) {
        this.$message.error("请上传退款凭证");
        return;
      }
      this.submitBtnLoading=true
      api.addVoucher({
        bizType: this.type,
        bizId: this.orderNo, // 订单编号
        url: this.url, // 支付凭证
      }).then(res => {
        depositRefund(this.orderNo,res.data.id).then(response => {
          this.submitBtnLoading=false
          this.$message.success(response.msg);
          this.closeDiolog();
        });
      });

    },
    doDepositRefundDetail() {
      depositRefundDetail(this.orderNo).then(response => {
        this.detail = response.data || {};
        this.shortBasic = response.data.shortBasic || {};
        this.loading = false
      });
    },
    //
    // getSummaries(param) {
    //   const {
    //     columns,
    //     data
    //   } = param;
    //   const sums = [];
    //   columns.forEach((column, index) => {
    //     if (index === 0) {
    //       sums[index] = '合计';
    //       return;
    //     }
    //     if (index === 1) {
    //       const values = data.map(item => Number(item[column.property]));
    //       sums[index] = values.reduce((prev, curr) => {
    //         const value = Number(curr);
    //         if (!isNaN(value)) {
    //           return prev + curr;
    //         } else {
    //           return prev;
    //         }
    //       }, 0);
    //       sums[index] += ' 元';
    //     }
    //   });
    //
    //   return sums;
    // },
    objectSpanMethod({
                       row,
                       column,
                       rowIndex,
                       columnIndex
                     }) {
      let rowspan = this.detail.chargingItems.length - 2;
      if (columnIndex === 0 || columnIndex > 5) {
        if (rowIndex === 0 && rowIndex < rowspan) {
          return {
            rowspan: rowspan,
            colspan: 1
          };
        } else if (rowIndex > 0 && rowIndex < rowspan) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }

      if (columnIndex > 5 && rowIndex >= rowspan) {
        if (rowIndex === rowspan) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      if (rowIndex >= rowspan) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        } else if (columnIndex === 5) {
          return [1, 4];
        } else if (columnIndex < 5) {
          return [0, 0];
        }
      }
    }
  },

}
</script>

<style scoped="scoped">
.mmv-title {
  margin: 0 !important;
  border-bottom: none !important;
}

.el-form-item {
  margin-bottom: 0px !important;
}

.el-table--medium .el-table__cell {
  padding: 3px !important;
}
</style>
